<template>
  <div class='echartbox'></div>
</template>

<script>
  // 引入基本模板
  let echarts = require('echarts/lib/echarts');
  // 引入柱状图组件
  require('echarts/lib/chart/bar');
  // 引入折线图组件
  require('echarts/lib/chart/line');
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip');
  require('echarts/lib/component/title');
  export default {
    name: 'Bar',
    props: {
      textlink: {
        type: String,
        required: false,
        default: ''
      },
      xname: {
        type: String,
        required: false,
        default: ''
      },
      yname: {
        type: String,
        required: false,
        default: ''
      },
      bardata: Object
    },
    data() {
      return {
        link: this.textlink,
        title: '',
        legend_data: [],
        axis_data: [],
        series_data: [],
        x_name: this.xname,
        y_name: this.yname
      }
    },
    watch: {
      bardata(val) {
        this.$nextTick(() => {
          this.drawBar()
        })
      }
    },
    mounted() {
      window.addEventListener('resize', function() {
        myCharts.resize()
      })
    },
    methods: {
      drawBar() {
        let myCharts = echarts.init(this.$refs.barchart)
        myCharts.setOption({
          grid: {
            left: '25',
            bottom: '20',
            top: '15',
            right: '0'
          },
          color: ['#F67A7B', '#31C2E2', '#A2BCE3'],
          title: {
            text: this.bardata.title,
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: []
          },
          toolbox: {
            show: true,
            feature: {
              dataView: {
                show: true,
                readOnly: false
              },
              magicType: {
                show: true,
                type: ['line', 'bar']
              },
              restore: {
                show: true
              },
              saveAsImage: {
                show: true
              }
            }
          },
          calculable: true,
          xAxis: [{
            type: 'category',
            data: ['3号','4号','5号','6号','7号'],
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#666',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisTick: {
              show: false
            }
          }],
          yAxis: [{
            type: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: '#666',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            splitLine:{
              show:true, //去掉网格线
              lineStyle:{
                color: ['#ccc'],
                width: 1,
                type: 'solid'
              }
            },
          }],
          series: [{
            name: '薪资',
            type: 'bar',
            itemStyle: {//柱图背景色
              color: '#F67A7B'
            },
            data: [25.6, 35, 30, 40, 32.6],
          },
          {
            name: '薪资',
            type: 'bar',
            itemStyle: {//柱图背景色
              color: '#31C2E2'
            },
            data: [26.4, 28.7, 17, 15.6, 12.2],
          },{
            name: '薪资',
            type: 'bar',
            itemStyle: {//柱图背景色
              color: '#A2BCE3'
            },
            data: [26.4, 28.7, 7.7, 15.6, 12.2],
          }]
        })
      }
    }
  }
</script>

<style>
  .echartbox {
    height: 145px;
  }
</style>
